<template>
	<view class="concat">
		<Nav :bgColor="bgColor" title="联系客服" @back="back"></Nav>
		<view class="title">福袋星球客服专员</view>
		<view class="code">
			<!-- <view class="img" :style="[{backgroundImage:`url(${this.codeImg})`},{backgroundSize: '100% 100%'}]"></view> -->
			<image class="img" :src="codeImg" mode="widthFix"></image>
			<text class="msg">微信扫二维码</text>
		</view>
		<button type="default" @click="copy" class="copy-btn">保存二维码</button>
		<text class="des">客服在线时间：(周一到周五9:00—18:00）</text>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	import Nav from "@/components/magic-box/magic-nav/index.vue"
	import navMixin from "@/common/js/nav.js";
	export default {
		mixins: [navMixin],
		components: {
			Nav
		},
		data() {
			return {
				codeImg: '/static/image/concat.png',
			};
		},
		methods: {
			copy() {
				// #ifdef H5
				uni.getImageInfo({
					src: this.codeImg,
					success: function(image) {
						let a = document.createElement("a");
						let name = 'concat';
						a.setAttribute('download', name);
						a.href = image.path;
						a.click();
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.compressImage({
					src: this.codeImg,
					quality: 100,
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //传入临时地址
							success() {
								uni.showToast({
									title: '保存成功！'
								})
							},
							fail() {
								uni.showToast({
									title: '保存失败！',
									icon: 'none'
								})
							}
						})
					}
				})
				// #endif
			}
		}
	}
</script>


<style lang="scss">
	.concat {
		.title {
			font-size: 44rpx;
			font-weight: bold;
			color: #222222;
			text-align: center;
			margin-top: 108rpx;
		}

		.code {
			.img {
				width: 328rpx;
				height: 328rpx;
				display: block;
				margin: 35rpx auto 0;
				border: 1px dashed #999999;
			}

			.msg {
				font-size: 32rpx;
				color: #222222;
				display: block;
				text-align: center;
				margin-top: 19rpx;
			}
		}

		.copy-btn {
			margin: 88rpx auto 0;
			display: block;
			width: 383rpx;
			height: 94rpx;
			background: #FFFFFF;
			border: 1px solid #999999;
			border-radius: 21rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #444444;
			line-height: 94rpx;
			text-align: center;
			padding: 0;
		}

		.des {
			margin-top: 31rpx;
			color: #999999;
			font-size: 25rpx;
			display: block;
			margin: 31rpx auto 0;
			text-align: center;
		}
	}
</style>
